<template>
    <div id="first">
        <input type="text" v-model="list" class="shuru" placeholder="添加要做的事">

        <button @click="add">提交</button>

        <ul >
            <li v-for="(item, index) in tolist" :key="item">
                
                    <input type="checkbox">
                
                {{item}}
                <button @click="del(index)" class="b2"><b>X</b></button>
            </li>
        </ul>
    </div>
    <div class="options">
        <button>全部:
            <span></span>
            <span>几条事项</span>
        </button>
        <button>已完成:
            <span></span>
        </button>
        <button>未完成:
            <span></span>
        </button>
    </div>
    
</template>
<script setup>

import {ref,onBeforeUpdate} from "vue"
    let list = ''

    let tolist = ref(['1','2','3'])
    
    let add = function(){
        tolist.value.push(list)
        console.log(list)
    }

    let del =function(index){
        tolist.value.splice(index,1)
    }
    onBeforeUpdate(()=>{
        list= null
    })
</script>

<style scoped>
    ul{
        list-style: none;
    }
    .shuru{
        width: 300px;
    }
    .b2{
        margin-left: 200px;
    }
    .options{
        width: 440px;
    }
    span{
        margin-right: 10px;
    }
    button{
        padding: 1px 4px;
        color:steelblue;
    }
</style>